<!-- 装修课程组件：课程栏 -->
<template>
  <view>
    <!-- 布局1. 两列课程，图片左文案右 -->
    <view v-if="layoutType === 'twoCol'" class="goods-xs-box ss-flex ss-flex-wrap"
      :style="[{ margin: '-' + data.space + 'rpx' }]">
      <view class="goods-xs-list" v-for="item in goodsList" :key="item.id" :style="[
          {
            padding: data.space + 'rpx',
          },
        ]">
        <s-goods-column class="goods-card" size="xs" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
          :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
          :bottomRadius="data.borderRadiusBottom"
          :titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
          @click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
      </view>
    </view>
    <!-- 布局. 三列课程：图片上文案下 -->
    <view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
      :style="[{ margin: '-' + data.space + 'rpx' }]">
      <view v-for="item in goodsList" :key="item.id" class="goods-card-box" :style="[
          {
            padding: data.space + 'rpx',
          },
        ]">
        <s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
          :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
          :bottomRadius="data.borderRadiusBottom" @click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
      </view>
    </view>

    <!-- 布局3. 一行课程，水平滑动 -->
    <view v-if="layoutType === 'horizSwiper'" class="">
      <scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
        <view class="goods-box ss-flex">
          <view class="goods-card-box" v-for="item in goodsList" :key="item.id"
            :style="[{ marginRight: data.space * 2 + 'rpx' }]">
            <s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
              :titleColor="data.fields.name?.color"
              :titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
              @click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  /**
   * 课程栏
   */
  import {
    onMounted,
    ref,
    computed
  } from 'vue';
  import sheep from '@/sheep';
  import SpuApi from "@/sheep/api/product/spu";

  const props = defineProps({
    data: {
      type: Object,
      default () {},
    },
    styles: {
      type: Object,
      default () {},
    },
  });
  const {
    layoutType,
    spuIds
  } = props.data;
  let {
    marginLeft,
    marginRight
  } = props.styles;
  const goodsList = ref([]);
  onMounted(async () => {
    let param = {
      ids: "",
      productType: 1,
      categoryId: 84,
      pageNo: 1,
      pageSize: 4,
      latitude: getApp().globalData.latitude,
      longitude: getApp().globalData.longitude,
      tabType: 0
    }
    if (spuIds.length > 0) {
      param.ids = spuIds.join(',');
    }
    let {
      data
    } = await SpuApi.getSpuPage(param);
    goodsList.value = data;
  });
</script>

<style lang="scss" scoped>
  .goods-xs-box {
    // margin: 0 auto;
    width: 100%;

    .goods-xs-list {
      box-sizing: border-box;
      flex-shrink: 0;
      overflow: hidden;
      width: 50%;
    }
  }

  .goods-sm-box {
    margin: 0 auto;
    box-sizing: border-box;

    .goods-card-box {
      flex-shrink: 0;
      overflow: hidden;
      width: 33.3%;
      box-sizing: border-box;
    }
  }

  .goods-scroll-box {
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
</style>